<!--
 * @Date: 2019-11-11 11:20:47
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2020-03-20 15:55:44
 * @describe: -楼盘详情页-
 -->
<template>
  <div class="BuildingDetails">
    <el-row>
      <el-col :span="18">
        <span class="title_span">楼盘管理 - 楼盘详情</span>
      </el-col>
      <el-col :span="5" style="text-align:right">
        <el-button
          v-if="MaintainType&&$hasPermission('dictionary:dictinfo:update')&&inputState==true"
          type="text"
          icon="el-icon-edit"
          @click="inputState=false"
        >修改</el-button>
        <el-button
          v-if="inputState==false"
          type="text"
          icon="el-icon-warning"
          @click="inputState=true"
        >取消</el-button>
        <el-button
          v-if="MaintainType&&$hasPermission('dictionary:dictinfo:update')"
          type="text"
          icon="el-icon-folder-checked"
          @click="update"
        >保存</el-button>
      </el-col>
    </el-row>
    <el-card class="box-card" style="margin-top:10px;">
      <el-row>
        <el-col :span="11">
          <div class="Properties">
            <div class="PropertiesIMG">
              <img v-if="LPimg" :src="LPimg" alt />
              <div v-else class="colorGray LPimgNull">图片拍摄中</div>
            </div>
            <div class="PropertiesName">
              <div class="marg_t15 fontColor1">
                楼盘名称：
                <span v-if="inputState">{{dataForm.name}}</span>
                <el-input v-else v-model="dataForm.name" class="formInput"></el-input>
              </div>
              <div class="marg_t15 fontColor1">
                楼盘编号：
                <span>{{"LP - "+dataForm.id.substring(dataForm.id.length-6)}}</span>
              </div>
              <div class="marg_t15">
                <el-tag class="marg_r10">{{ $getDictLabel("dictType", dataForm.type)}}</el-tag>
                <el-tag class="marg_r10">{{ $Dictionaries("CityRegion", dataForm.districtCode) }}</el-tag>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="7">
          <div class="marg_t15 fontColor1">
            出售均价：
            <span v-if="inputState">{{dataForm.sellPrices}} - {{dataForm.sellPricee}} 元/m</span>
            <span v-else>
              <el-input v-model="dataForm.sellPrices" style="width:80px"></el-input>-
              <el-input v-model="dataForm.sellPricee" style="width:80px"></el-input>元/m
            </span>
          </div>
          <div class="marg_t15 fontColor1">
            出租均价：
            <span v-if="inputState">{{dataForm.leasePrices}} - {{dataForm.leasePricee}} 元/m/月</span>
            <span v-else>
              <el-input v-model="dataForm.leasePrices" style="width:80px"></el-input>-
              <el-input v-model="dataForm.leasePricee" style="width:80px"></el-input>元/m/月
            </span>
          </div>
          <div class="marg_t15 fontColor1">
            地铁线路：
            <span v-if="inputState" v-for="(item,index) in metroList" :key="index">
              {{item.metroName}}
              {{item.stationName}}
              &nbsp;
            </span>
            <el-checkbox-group
              v-model="metroCheckList"
              v-if="!inputState"
              style="display:inline-block"
            >
              <el-checkbox
                :label="item.id"
                v-for="(item,index) in metroList"
                :key="index"
                class="fontColor1"
              >
                {{item.metroName}}
                {{item.stationName}}
              </el-checkbox>
            </el-checkbox-group>
            <span class="TabHeader_icon" @click="deleteMetroList" v-if="!inputState">
              <svg
                t="1574928036401"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="2628"
                width="14"
                height="14"
              >
                <path
                  d="M762.218 134.865H263.15c-45.947 0-83.178 37.228-83.178 83.175v27.725h665.422V218.04c0.001-45.947-37.229-83.175-83.177-83.175m-145.29-55.45l12.238 87.507H396.203l12.237-87.507h208.488m6.66-55.45H401.783c-22.88 0-44.162 18.52-47.357 41.209L338.207 181.19c-3.168 22.66 12.97 41.181 35.85 41.181h277.258c22.879 0 39.017-18.519 35.823-41.208l-16.22-116.017c-3.17-22.662-24.451-41.181-47.33-41.181m152.493 277.248H249.288c-30.488 0-53.205 24.855-50.443 55.233l45.435 499.479c2.734 30.379 29.973 55.233 60.46 55.233h415.89c30.487 0 57.726-24.856 60.46-55.233l45.434-499.48c2.761-30.377-19.956-55.232-50.443-55.232M401.78 800.26h-83.178l-27.726-388.147H401.78V800.26z m166.356 0H457.233V412.113h110.904V800.26z m138.629 0h-83.178V412.113H734.49L706.766 800.26z"
                  p-id="2629"
                  fill="#d81e06"
                />
              </svg>
            </span>

            <el-popover placement="bottom" trigger="click" v-if="!inputState">
              <span class="TabHeader_icon" slot="reference">
                <svg
                  t="1574929780282"
                  class="icon"
                  viewBox="0 0 1028 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="3461"
                  width="14"
                  height="14"
                >
                  <path
                    d="M512.277 954.412c-118.89 0-230.659-46.078-314.73-129.73S67.12 629.666 67.12 511.222s46.327-229.744 130.398-313.427 195.82-129.73 314.73-129.73 230.659 46.078 314.72 129.73S957.397 392.81 957.397 511.183 911.078 740.96 826.97 824.642s-195.8 129.77-314.692 129.77z m0-822.784c-101.972 0-197.809 39.494-269.865 111.222s-111.7 166.997-111.7 268.373 39.653 196.695 111.67 268.335S410.246 890.78 512.248 890.78s197.809-39.484 269.865-111.222 111.7-166.998 111.67-268.374c-0.03-101.375-39.654-196.665-111.67-268.303S614.22 131.628 512.277 131.628z m222.585 347.8H544.073V288.64c-0.76-17.561-15.613-31.18-33.173-30.419-16.495 0.714-29.704 13.924-30.419 30.419v190.787H289.703c-17.56 0.761-31.179 15.614-30.419 33.174 0.715 16.494 13.924 29.703 30.42 30.418H480.48v190.788c0.761 17.56 15.614 31.179 33.174 30.419 16.494-0.715 29.703-13.925 30.418-30.42V543.02h190.788c17.56 0.762 32.413-12.857 33.173-30.418 0.762-17.561-12.858-32.414-30.419-33.174a31.683 31.683 0 0 0-2.753 0z"
                    fill="#3dc2ff"
                    p-id="3462"
                  />
                </svg>
              </span>
              线路：
              <el-select v-model="addMetroFrom.metroId" placeholder="请选择" clearable size="small">
                <el-option
                  v-for="item in this.$store.state.MetroPage"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                  @click.native="MetroPageChange(item)"
                ></el-option>
              </el-select>站点：
              <el-select
                v-model="addMetroFrom.stationId"
                placeholder="请选择"
                :disabled="addMetroFrom.metroId==''"
                size="small"
              >
                <el-option
                  v-for="item in metrostationList"
                  :key="item.stationId"
                  :label="item.stationName"
                  :value="item.stationId"
                ></el-option>
              </el-select>

              <!-- <br> -->
              <el-button type="primary" size="small" style="margin-left:5px;" @click="addMetro">添加</el-button>
            </el-popover>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="marg_t15 fontColor1">
            楼盘别名：
            <span v-if="inputState">{{dataForm.anotherName}}</span>
            <el-input v-else v-model="dataForm.anotherName" class="formInput"></el-input>
          </div>
          <div class="marg_t15 fontColor1">
            维护人：
            <span v-if="inputState">{{dataForm.maintainName}}&nbsp;</span>
            <el-popover
              placement="bottom"
              width="200"
              trigger="click"
              :content="'手机号码：'+dataForm.maintainPhone"
              v-if="inputState"
            >
              <el-button slot="reference" type="text" icon="el-icon-user">查看联系方式</el-button>
            </el-popover>

            <span v-else-if="!inputState&&$hasPermission('dictionary:dictinfo:updateMaintain')">
              {{dataForm.maintainName}}&nbsp;
              <el-popover placement="bottom" width="200" trigger="click">
                <div>
                  部门：
                  <el-cascader
                    style="width:120px"
                    v-model="deptSelectVal"
                    :options="this.$store.state.DeptList"
                    :show-all-levels="false"
                    @change="deptIdChange"
                    :props="deptProps"
                    ref="myCascader"
                  ></el-cascader>
                </div>
                <div>
                  人员：
                  <el-select v-model="dataForm.maintainName" placeholder="请选择" style="width:120px">
                    <el-option
                      v-for="item in maintainList"
                      :key="item.id"
                      :label="item.realName"
                      :value="item.id"
                      @click.native="maintainChange(item)"
                    ></el-option>
                  </el-select>
                </div>
                <el-button slot="reference" type="text">修改维护人</el-button>
              </el-popover>
            </span>
            <span v-else>{{dataForm.maintainName}}&nbsp;</span>
          </div>
          <div class="text_right martop10">
            <el-button type="primary" @click="gotoHouse('1')">出租 （{{BuildingSales.lease}}）</el-button>
            <el-button type="danger" @click="gotoHouse('0')">出售 （{{BuildingSales.sell}}）</el-button>
          </div>
        </el-col>
      </el-row>
    </el-card>

    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span class="card_title">楼盘简介</span>
      </div>
      <div v-if="inputState" class="fontColor1 introduction">{{dataForm.content}}</div>
      <el-input
        v-else
        type="textarea"
        :autosize="{ minRows: 1, maxRows: 4}"
        v-model="dataForm.content"
      ></el-input>
    </el-card>
    <el-row>
      <el-col :span="12" style="padding-right:7px;">
        <el-card class="box-card" style="margin-top:15px;">
          <div slot="header" class="clearfix">
            <span class="card_title">基本信息</span>
          </div>
          <div class="fontColor1">
            <ul class="parameter_ul">
              <li class="list_background">
                <div class="parameter_l">
                  <span class="parameter_span">楼盘名称：</span>
                  <span v-if="inputState">{{dataForm.name}}</span>
                  <el-input v-else v-model="dataForm.name" class="formInput"></el-input>
                </div>
                <div class="parameter_r">
                  <span class="parameter_span">占地面积：</span>
                  <span v-if="inputState">{{dataForm.occupyArea}} ㎡</span>
                  <el-input v-else v-model="dataForm.occupyArea" class="formInput"></el-input>
                </div>
              </li>
              <li>
                <div class="parameter_l">
                  <span class="parameter_span">楼盘地址：</span>
                  <span v-if="inputState">{{dataForm.address}}</span>
                  <el-input v-else v-model="dataForm.address" class="formInput"></el-input>
                </div>
                <div class="parameter_r">
                  <span class="parameter_span">建筑面积：</span>
                  <span v-if="inputState">{{dataForm.architectureArea}} ㎡</span>
                  <el-input v-else v-model="dataForm.architectureArea" class="formInput"></el-input>
                </div>
              </li>
              <li class="list_background">
                <div class="parameter_l">
                  <span class="parameter_span">物业类型：</span>
                  <span v-if="inputState">{{ $getDictLabel("dictType", dataForm.type)}}</span>
                  <ren-select
                    v-else
                    v-model="dataForm.type"
                    dict-type="dictType"
                    placeholder="物业类型"
                    class="formInput"
                  ></ren-select>
                </div>
                <div class="parameter_r">
                  <span class="parameter_span">栋座情况：</span>
                  <span v-if="inputState">{{dataForm.buildSituation}}</span>
                  <el-input v-else v-model="dataForm.buildSituation" class="formInput"></el-input>
                </div>
              </li>
              <li>
                <div class="parameter_l" v-if="Number(dataForm.type)==0">
                  <span class="parameter_span">写字楼级别：</span>
                  <span v-if="inputState">{{dataForm.olevel}}</span>
                  <el-input v-else v-model="dataForm.olevel" class="formInput"></el-input>
                </div>
                <div class="parameter_r">
                  <span class="parameter_span">所属商圈：</span>
                  <span v-if="inputState">{{ $Dictionaries("BusinessPage", dataForm.business) }}</span>
                  <el-select v-else v-model="dataForm.business" class="formInput">
                    <el-option
                      v-for="item in this.$store.state.BusinessPage"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </div>
              </li>
              <li class="list_background">
                <div class="parameter_l">
                  <span class="parameter_span">建筑年代：</span>
                  <span
                    v-if="inputState"
                  >{{dataForm.projectYear!=null?dataForm.projectYear.substring(0,10):dataForm.projectYear}}</span>
                  <el-date-picker
                    v-else
                    v-model="dataForm.projectYear"
                    type="date"
                    placeholder="选择日期"
                    value-format="timestamp"
                    class="formInput"
                  ></el-date-picker>
                </div>
                <div class="parameter_r">
                  <span class="parameter_span">交房时间：</span>
                  <span
                    v-if="inputState"
                  >{{dataForm.deliverTime!=null?dataForm.deliverTime.substring(0,10):dataForm.deliverTime}}</span>
                  <el-date-picker
                    v-else
                    v-model="dataForm.deliverTime"
                    type="date"
                    placeholder="选择日期"
                    value-format="timestamp"
                    class="formInput"
                  ></el-date-picker>
                </div>
              </li>
              <li>
                <div class="parameter_l">
                  <span class="parameter_span">产权年限：</span>
                  <span v-if="inputState">{{dataForm.propertyYear}}</span>
                  <el-input v-else v-model="dataForm.propertyYear" class="formInput"></el-input>
                </div>
                <div class="parameter_r">
                  <span class="parameter_span">开发商：</span>
                  <span v-if="inputState">{{dataForm.developers}}</span>
                  <el-input v-else v-model="dataForm.developers" class="formInput"></el-input>
                </div>
              </li>
              <li class="list_background">
                <div class="parameter_l">
                  <span class="parameter_span">开发商对接人：</span>
                  <span v-if="inputState">{{dataForm.developersUser}}</span>
                  <!-- <el-popover
                    placement="bottom"
                    width="200"
                    trigger="manual"
                    v-model="visible"
                    v-if="inputState"
                    :content="'对接电话：'+dataForm.developersPhone"
                  >
                    <el-button
                      slot="reference"
                      type="text"
                      @click="visible = !visible"
                    >{{dataForm.developersUser}}</el-button>
                  </el-popover>-->
                  <el-input v-else v-model="dataForm.developersUser" class="formInput"></el-input>
                </div>
                <div class="parameter_r">
                  <span class="parameter_span">电话：</span>
                  <span v-if="inputState">{{dataForm.developersPhone}}</span>
                  <el-input v-else v-model="dataForm.developersPhone" class="formInput"></el-input>
                </div>
              </li>
            </ul>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12" style="padding-left:7px;">
        <el-card class="box-card" style="margin-top:15px;">
          <div slot="header" class="clearfix">
            <span class="card_title">楼盘参数</span>
          </div>
          <div class="fontColor1">
            <ul class="parameter_ul">
              <li class="list_background">
                <div class="parameter_l">
                  <span class="parameter_span">总栋数：</span>
                  <span v-if="inputState">{{dataForm.floorSum}}</span>
                  <el-input v-else v-model="dataForm.floorSum" class="formInput"></el-input>
                </div>
                <div class="parameter_r">
                  <span class="parameter_span">外墙：</span>
                  <span v-if="inputState">{{dataForm.wallHeight}} m</span>
                  <el-input v-else v-model="dataForm.wallHeight" class="formInput"></el-input>
                </div>
              </li>
              <li>
                <div class="parameter_l">
                  <span class="parameter_span">总户数：</span>
                  <span v-if="inputState">{{dataForm.homeSum}}</span>
                  <el-input v-else v-model="dataForm.homeSum" class="formInput"></el-input>
                </div>
                <div class="parameter_r">
                  <span class="parameter_span">净高：</span>
                  <span v-if="inputState">{{dataForm.clearHeight }} m</span>
                  <el-input v-else v-model="dataForm.clearHeight" class="formInput"></el-input>
                </div>
              </li>
              <li class="list_background">
                <div class="parameter_l">
                  <span class="parameter_span">面积区间：</span>
                  <span v-if="inputState">{{dataForm.areas+'-'+dataForm.areae}}</span>
                  <span v-else>
                    <el-input v-model="dataForm.areas" style="width:25%"></el-input>&nbsp;-&nbsp;
                    <el-input v-model="dataForm.areae" style="width:25%"></el-input>
                  </span>
                </div>
                <div class="parameter_r">
                  <span class="parameter_span">层高：</span>
                  <span v-if="inputState">{{dataForm.storeyHeight}} m</span>
                  <el-input v-else v-model="dataForm.storeyHeight" class="formInput"></el-input>
                </div>
              </li>
              <li>
                <div class="parameter_l">
                  <span class="parameter_span">物业公司：</span>
                  <span v-if="inputState">{{dataForm.propertyCompany}}</span>
                  <el-input v-else v-model="dataForm.propertyCompany" class="formInput"></el-input>
                </div>
                <div class="parameter_r">
                  <span class="parameter_span">地下几层：</span>
                  <span v-if="inputState">{{dataForm.lowerLayer}} 层</span>
                  <el-input v-else v-model="dataForm.lowerLayer" class="formInput"></el-input>
                </div>
              </li>
              <li class="list_background">
                <div class="parameter_l">
                  <span class="parameter_span">物业费：</span>
                  <span v-if="inputState">{{dataForm.propertyPrice}}</span>
                  <el-input v-else v-model="dataForm.propertyPrice" class="formInput"></el-input>
                </div>
                <div class="parameter_r">
                  <span class="parameter_span">地面：</span>
                  <span v-if="inputState">{{dataForm.upperLayer}} 层</span>
                  <el-input v-else v-model="dataForm.upperLayer" class="formInput"></el-input>
                </div>
              </li>
              <li>
                <div class="parameter_l">
                  <span class="parameter_span">物业电话：</span>
                  <span v-if="inputState">{{dataForm.propertyPhone}}</span>
                  <el-input v-else v-model="dataForm.propertyPhone" class="formInput"></el-input>
                </div>
                <div class="parameter_r">
                  <span class="parameter_span">物业地址：</span>
                  <span v-if="inputState">{{dataForm.propertyAdress}}</span>
                  <el-input v-else v-model="dataForm.propertyAdress" class="formInput"></el-input>
                </div>
              </li>
              <li class="list_background">
                <div class="parameter_l">
                  <span class="parameter_span">经纬度：</span>
                  <span v-if="inputState">{{dataForm.latitude}}</span>
                  <el-input v-else v-model="dataForm.latitude" class="formInput" @focus="getLngLat"></el-input>
                </div>
                <div class="parameter_r">
                  <span class="parameter_span">项目高度：</span>
                  <span v-if="inputState">{{dataForm.projectHeight}}</span>
                  <el-input v-else v-model="dataForm.projectHeight" class="formInput"></el-input>
                </div>
              </li>
            </ul>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-card class="box-card martop15">
      <div slot="header" class="clearfix">
        <span class="card_title">新盘备注：</span>
      </div>
      <div v-if="inputState" class="fontColor1 introduction">{{dataForm.remark}}</div>
      <el-input
        v-else
        type="textarea"
        :autosize="{ minRows: 1, maxRows: 4}"
        v-model="dataForm.remark"
      ></el-input>
    </el-card>
    <el-card class="box-card" style="margin-top:15px;">
      <div slot="header" class="clearfix">
        <span class="card_title">楼盘配套</span>
      </div>
      <el-row>
        <el-col :span="3">
          <span>配套信息</span>
        </el-col>
        <el-col :span="7" class="fontColor1">
          <div>
            <span class="Matching_span">客梯数：</span>
            <span v-if="inputState">{{dataForm.liftElevator }} 部</span>
            <el-input v-else v-model="dataForm.liftElevator" class="formInput"></el-input>
          </div>
          <div>
            <span class="Matching_span">货梯数：</span>
            <span v-if="inputState">{{dataForm.liftCargo }} 部</span>
            <el-input v-else v-model="dataForm.liftCargo" class="formInput"></el-input>
          </div>
          <div>
            <span class="Matching_span">电梯品牌：</span>
            <span v-if="inputState">{{dataForm.liftBrand}}</span>
            <el-input v-else v-model="dataForm.liftBrand" class="formInput"></el-input>
          </div>
        </el-col>

        <el-col :span="7" class="fontColor1">
          <div>
            <span class="Matching_span">供电类型：</span>
            <span v-if="inputState">{{dataForm.power}}</span>
            <el-input v-else v-model="dataForm.power" class="formInput"></el-input>
          </div>
          <div>
            <span class="Matching_span">供水类型：</span>
            <span v-if="inputState">{{dataForm.water}}</span>
            <el-input v-else v-model="dataForm.water" class="formInput"></el-input>
          </div>
          <div>
            <span class="Matching_span">供暖类型：</span>
            <span v-if="inputState">{{dataForm.airConditioner}}</span>
            <el-input v-else v-model="dataForm.airConditioner" class="formInput"></el-input>
          </div>
        </el-col>

        <el-col :span="7" class="fontColor1">
          <div>
            <span class="Matching_span">建筑类型：</span>
            <span v-if="inputState">{{ $getDictLabel("dictType", dataForm.type)}}</span>
            <ren-select
              v-else
              v-model="dataForm.type"
              dict-type="dictType"
              placeholder="物业类型"
              class="formInput"
            ></ren-select>
          </div>
          <div>
            <span class="Matching_span">车位费：</span>
            <span v-if="inputState">{{dataForm.placePrice }}元/小时</span>
            <el-input v-else v-model="dataForm.placePrice" class="formInput"></el-input>
          </div>

          <div>
            <span class="Matching_span">车位数：</span>
            <span v-if="inputState">{{dataForm.place }} 个</span>
            <el-input v-else v-model="dataForm.place" class="formInput"></el-input>
          </div>

          <!-- <div>
            <span class="Matching_span">楼盘备注：</span>
            <span v-if="inputState">{{dataForm.remark}}</span>
            <el-input
              v-else
              v-model="dataForm.remark"
              class="formInput"
            ></el-input>
          </div>-->
        </el-col>
      </el-row>
    </el-card>

    <el-card class="box-card" style="margin-top:15px;">
      <div slot="header" class="clearfix">
        <el-row>
          <el-col :span="12">
            <span class="card_title" style="width:180px;">楼盘图片以及视频</span>
            <el-radio-group v-model="imagePageType" @change="getimg">
              <el-radio :label="0">首页图</el-radio>
              <el-radio :label="1">实景图</el-radio>
              <el-radio :label="2">周边配套</el-radio>
            </el-radio-group>
          </el-col>
          <el-col :span="12" style="text-align:right">
            <el-button
              type="primary"
              style="width:80px;float:right"
              v-if="MaintainType&&$hasPermission('dictionary:dictinfoimage:delete')"
              @click="deleteImage"
            >批量删除</el-button>
            <el-button
              type="primary"
              @click="UploadImg"
              style="width:80px;float:right;margin-right:10px"
              v-if="MaintainType&&$hasPermission('dictionary:dictinfo:upload')"
            >上传图片</el-button>
            <!-- <el-upload
                            class="upload-demo"
                            action="/dictionary/dictinfo/upload"
                            multiple
                            :limit="3"
                            :on-exceed="handleExceed"
                            :file-list="fileList"
                            :before-upload="imgUploadBefore"
                            style="width:80px;float:right;margin-right:10px"
                        >
                            <el-button
                                size="small"
                                type="primary"
                                v-if="MaintainType&&$hasPermission('dictionary:dictinfo:upload')"
                            >点击上传</el-button>
            </el-upload>-->
          </el-col>
        </el-row>
      </div>
      <div class="LP_imgList">
        <el-checkbox-group
          v-model="checkList"
          class="House_img_check"
          v-if="MaintainType&&$hasPermission('dictionary:dictinfo:update')"
          @change="checkListChange"
        >
          <el-checkbox :label="item.id" v-for="(item,index) in imglist" :key="index" :value="item">
            <div @dblclick="imgDblclick(item.url)">
              <img :src="item.url" alt />
            </div>
            <span class="colorGray display_i_b" style="padding-top:5px;">{{item.title}}</span>
          </el-checkbox>
        </el-checkbox-group>

        <ul v-else>
          <li v-for="(item,index) in imglist" class="House_img_li" :key="index">
            <div>
              <img :src="item.url" alt />
            </div>
          </li>
        </ul>
        <el-pagination
          :current-page="ImgPage"
          :total="ImgTotal"
          layout="total,  prev, pager, next, jumper"
          @current-change="imglistChange"
        ></el-pagination>
      </div>
    </el-card>

    <el-dialog :visible.sync="IMGdialogVisible">
      <img width="100%" :src="dialogImageUrl" alt />
    </el-dialog>

    <el-card class="box-card" style="margin-top:15px;">
      <div slot="header" class="clearfix">
        <span class="card_title">周边配套</span>
      </div>

      <baiduMapView ref="baiduMapView" :latitudeVal="dataForm.latitude" v-if="baiduMapView_if"></baiduMapView>
    </el-card>

    <el-dialog title="上传楼盘图片" :visible.sync="FYdialogVisible" width="30%">
      <el-form ref="form" :model="FYimgUploadFrom" label-width="50px" label-position="top">
        <el-form-item label="备注">
          <el-input v-model="FYimgUploadFrom.title"></el-input>
        </el-form-item>
        <el-form-item label="选择图片">
          <el-upload
            class="upload-demo"
            ref="FJupload"
            action="/project/projectinfo/apartmentUpload"
            :file-list="fileListFY"
            :auto-upload="false"
            :limit="1"
            list-type="picture-card"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="FYdialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="FJuploadFun" :loading="BtnLoading">点击上传</el-button>
      </span>
    </el-dialog>

    <baiduMapUpdate
      v-if="baiduMap_dialog"
      ref="getBaiduMap"
      @getLngLat="LngLatData"
      :UpdateVal="dataForm.latitude"
    ></baiduMapUpdate>
  </div>
</template>
<script>
import baiduMapUpdate from "../BMap/baiduMap";
import baiduMapView from "../BMap/baiduMapView";
export default {
  name: "BuildingDetails",
  data() {
    return {
      floorID: this.$route.query.ID,
      inputState: true,
      baiduMap_dialog: false,
      baiduMapView_if: false,
      dataForm: {
        name: "",
        id: ""
      },
      imglist: [],
      MaintainType: false,
      ImgPage: 1,
      ImgTotal: 0,
      imagePageType: 0,
      checkList: [],
      checkedImgList: [], //图片选中数组
      fileList: [],
      LPimg: "",
      metroList: [],
      addMetroFrom: {
        dictId: this.$route.query.ID,
        metroId: "",
        stationId: ""
      },
      metrostationList: [], //地铁站点列表
      metroCheckList: [], //删除地铁选中列表
      visible: false,
      deptProps: {
        value: "id",
        label: "name",
        checkStrictly: true
      },
      deptSelectVal: "",
      maintainList: this.$store.state.maintainList,
      BuildingSales: {
        lease: 0,
        sell: 0
      },
      FYdialogVisible: false,
      FYimgUploadFrom: {
        title: ""
      },
      fileListFY: [],
      BtnLoading: false,
      IMGdialogVisible: false,
      dialogImageUrl: ""
    };
  },
  components: {
    // BaiduMap,
    // BmGeolocation,
    baiduMapUpdate,
    baiduMapView
  },
  created() {
    if (!this.floorID) {
      this.$router.go(-1);
    } else {
      this.getAll();
    }
  },
  mounted() {},
  methods: {
    getAll() {
      this.getInfo();
      this.getimg();
      this.getMetroList(); //获取地铁
      this.getSales();
    },
    getInfo() {
      let _this = this;
      this.$http
        .get(`/dictionary/dictinfo/${this.floorID}`)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          _this.dataForm = res.data;
          _this.MaintainType = res.data.permission;
          _this.baiduMapView_if = true;
          _this.getUserInfo();
        })
        .catch(() => {});
    },

    //保存修改楼盘
    update() {
      let _this = this;
      this.$http
        .put("/dictionary/dictinfo", this.dataForm)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          _this.inputState = true;
          this.$message({
            message: this.$t("prompt.success"),
            type: "success",
            duration: 1000,
            onClose: () => {
              this.getInfo();
            }
          });
        })
        .catch(() => {});
    },

    //获取楼盘图片
    getimg() {
      let _this = this;
      this.$http
        .get(`/dictionary/dictinfo/imagePage`, {
          params: {
            dictId: _this.floorID,
            type: _this.imagePageType,
            page: _this.ImgPage,
            limit:
              _this.MaintainType == true &&
              _this.$hasPermission("dictionary:dictinfo:update") == true
                ? 6
                : 8
          }
        })
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          _this.ImgTotal = res.data.total;
          _this.imglist = res.data.list;
          _this.LPimg = "";
          if (_this.imagePageType == 0) {
            _this.LPimg = _this.imglist[0].url;
          }
        })
        .catch(() => {});
    },
    imglistChange(num) {
      _this.ImgPage = num;
      _this.getimg();
    },
    checkListChange(list) {
      this.checkedImgList = list;
    },
    //删除图片
    deleteImage() {
      let _this = this;
      this.$confirm("您将批量删除选中的图片, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$http
            .post(
              `/dictionary/dictinfo/deleteImage`,
              {},
              {
                params: {
                  ids: _this.checkedImgList.join()
                }
              }
            )
            .then(({ data: res }) => {
              if (res.code !== 0) {
                return this.$message.error(res.msg);
              }
              _this.$message.success("删除成功！");
              _this.checkedImgList = [];
              _this.getimg();
            })
            .catch(() => {});
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },

    // handleExceed(files, fileList) {
    //     this.$message.warning(
    //         `当前限制选择 3 个文件，本次选择了 ${
    //             files.length
    //         } 个文件，共选择了 ${files.length + fileList.length} 个文件`
    //     );
    // },
    // imgUploadBefore(file) {
    //     let _this = this;
    //     let formData = new FormData();
    //     formData.append("file", file);
    //     let params = formData;
    //     this.$http
    //         .post("/dictionary/dictinfo/upload", formData, {
    //             params: {
    //                 dictId: _this.floorID,
    //                 type: _this.imagePageType
    //             }
    //         })
    //         .then(({ data: res }) => {
    //             if (res.code !== 0) {
    //                 return this.$message.error(res.msg);
    //             }
    //             this.$message.success("上传成功！");
    //             _this.getimg();
    //         })
    //         .catch(() => {});
    //     return false;
    // },

    //获取楼盘地铁线路
    getMetroList() {
      let _this = this;
      this.$http
        .get(`/dictionary/dictinfo/metroList`, {
          params: {
            dictId: _this.floorID
          }
        })
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          _this.metroList = res.data;
        })
        .catch(() => {});
    },

    //地铁线路选择change
    MetroPageChange(item) {
      this.metrostationList = item.metroStation;
    },
    //添加地铁线路站点
    addMetro() {
      if (this.addMetroFrom.stationId != "") {
        this.$http
          .post("/dictionary/dictinfo/saveMetro", this.addMetroFrom)
          .then(({ data: res }) => {
            if (res.code !== 0) {
              return this.$message.error(res.msg);
            }
            this.$message.success("添加成功！");
            this.getMetroList(); //获取地铁
          })
          .catch(() => {});
      }
    },
    //删除地铁
    deleteMetroList() {
      let _this = this;
      if (this.metroCheckList.length > 0) {
        this.$confirm("您将删除该地铁线路, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          this.$http
            .post(
              "/dictionary/dictinfo/deleteMetro",
              {},
              {
                params: {
                  ids: _this.metroCheckList.join()
                }
              }
            )
            .then(({ data: res }) => {
              if (res.code !== 0) {
                return this.$message.error(res.msg);
              }
              this.getMetroList(); //获取地铁
            })
            .catch(() => {});
        });
      }
    },

    //点击获取经纬度
    getLngLat() {
      this.baiduMap_dialog = true;
      this.$nextTick(() => {
        this.$refs.getBaiduMap.init();
      });
    },
    //获取经纬度
    LngLatData(obj) {
      this.dataForm.latitude = obj.lng + "," + obj.lat;
    },
    //获取维护人信息
    getUserInfo() {
      let _this = this;
      if (!_this.dataForm.maintain) {
        return;
      }
      this.$http
        .get("/sys/user/simpleUserinfo", {
          params: {
            id: _this.dataForm.maintain
          }
        })
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          _this.dataForm.maintainName = res.data.realName;
          _this.dataForm.maintainPhone = res.data.mobile;
        })
        .catch(() => {});
    },

    deptIdChange(val) {
      // let a = val[val.length - 1];
      let a = this.$refs.myCascader.getCheckedNodes()[0].value;
      this.getUserList(a);
    },
    // 获取部门员工列表
    getUserList(deptId) {
      let _this = this;
      this.$http
        .get(`/sys/user/deptUserList`, {
          params: {
            deptId: deptId
          }
        })
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          _this.maintainList = res.data;
        })
        .catch(() => {});
    },
    //维护人修改
    maintainChange(item) {
      let _this = this;
      this.$http
        .put(
          `/dictionary/dictinfo/updateMaintain`,
          {},
          {
            params: {
              id: _this.floorID,
              maintain: item.id,
              deptId: item.deptId
            }
          }
        )
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          this.$message.success("更改成功");
          this.getInfo();
        })
        .catch(() => {});
    },
    // 获取楼盘出售出租多少套
    getSales() {
      let _this = this;
      this.$http
        .get(`/dictionary/dictinfo/getSales`, {
          params: {
            id: this.$route.query.ID
          }
        })
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          _this.BuildingSales = res.data;
        })
        .catch(() => {});
    },
    //跳转房源列表
    gotoHouse(val) {
      this.$router.push({
        name: "house-houseinfo",
        query: {
          dictId: this.floorID,
          transactionType: val
        }
      });
    },
    //点击上传房间图片
    UploadImg() {
      this.fileListFY = [];
      this.FYimgUploadFrom.title = "";
      this.FYdialogVisible = true;
    },
    //确定上传房间图片
    FJuploadFun() {
      let _this = this;
      _this.BtnLoading = true;
      let formData = new FormData();
      formData.append("file", this.$refs.FJupload.uploadFiles[0].raw);
      this.$http
        .post("/dictionary/dictinfo/upload", formData, {
          params: {
            dictId: _this.floorID,
            type: _this.imagePageType,
            title: _this.FYimgUploadFrom.title
          }
        })
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          this.$message.success("上传成功！");
          _this.FYdialogVisible = false;
          _this.BtnLoading = false;
          _this.getimg();
        })
        .catch(() => {});
    },
    imgDblclick(url) {
      this.dialogImageUrl = "";
      this.dialogImageUrl = url;
      this.IMGdialogVisible = true;
    }
  },
  watch: {
    $route(to, from) {
      // this.MaintainType = JSON.parse(sessionStorage.getItem("MaintainType"));
      if (to.name == "BuildingDetails") {
        // 对路由变化作出响应...
        if (!this.$route.query.ID) {
          return;
        }
        this.floorID = this.$route.query.ID;
        this.inputState = true;
        this.getInfo();
        this.getimg();
      }
    }
  }
};
</script>
<style scoped lang="scss">
.title_span {
  display: inline-block;
  font-size: 16px;
  color: rgb(116, 116, 116);
  line-height: 33px;
}
.Properties {
  height: 130px;
}
.PropertiesIMG {
  width: 180px;
  height: 100%;
  float: left;
  border-radius: 10px;
  overflow: hidden;
}
.PropertiesIMG img {
  width: 100%;
  height: 100%;
}
.PropertiesName {
  float: left;
  margin-left: 20px;
}
.introduction {
  line-height: 22px;
}
ul,
li {
  list-style: none;
}
ul {
  padding: 0;
}
.parameter_l {
  width: 50%;
  float: left;
  padding-left: 8%;
}
.parameter_r {
  width: 50%;
  float: right;
  padding-left: 5%;
}
.parameter_ul li {
  width: 100%;
  height: 50px;
  line-height: 50px;
  overflow: hidden;
}
.list_background {
  background: rgb(248, 248, 248);
}
.parameter_span {
  display: inline-block;
  width: 40%;
  float: left;
}
.Matching_span {
  display: inline-block;
  width: 100px;
  line-height: 34px;
}
.LP_imgList {
  width: 100%;
  height: 175px;
  margin-top: -12px;
}
.LP_imgList ul {
  width: 100%;
  height: 77%;
}
.House_img_li {
  width: 180px;
  height: 135px;
  float: left;
  margin-right: 15px;
}
.House_img_li div {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  overflow: hidden;
}
.House_img_li img {
  width: 100%;
  height: 100%;
}
.House_img_check {
  /* width: 230px; */
  height: 135px;
}
.House_img_check .el-checkbox {
  width: 230px;
  height: 100%;
  position: relative;
}
.House_img_check .el-checkbox div {
  width: 100%;
  height: 100%;
}
.House_img_check .el-checkbox div img {
  /* width: 100%; */
  height: 135px;
}
.House_img_check .el-checkbox .el-checkbox__label {
  position: absolute;
  top: 0;
}
.el-checkbox {
  margin-right: 20px;
}
</style>